<template>
  <view class="feature-intro page-container">
    <!-- 返回按钮 -->
    <view class="back-button" @click="handleBack">
      <uni-icons type="left" size="20" color="#333"></uni-icons>
    </view>
    
    <view class="content">
      <view class="header">
        <text class="title">功能介绍</text>
      </view>
      
      <view class="feature-list">
        <view class="feature-item">
          <image src="/static/images/feature/appointment.svg" mode="aspectFit" class="feature-icon"></image>
          <view class="feature-content">
            <text class="feature-title">预约挂号</text>
            <text class="feature-desc">便捷的在线预约服务，支持选择科室、医生和时间，让就医更轻松</text>
          </view>
        </view>
        
        <view class="feature-item">
          <image src="/static/images/feature/ai-diagnosis.svg" mode="aspectFit" class="feature-icon"></image>
          <view class="feature-content">
            <text class="feature-title">AI辅助问诊</text>
            <text class="feature-desc">智能诊断系统为您提供初步诊断建议，帮助您更好地了解自身健康状况</text>
          </view>
        </view>
        
        <view class="feature-item">
          <image src="/static/images/feature/medical-exam.svg" mode="aspectFit" class="feature-icon"></image>
          <view class="feature-content">
            <text class="feature-title">体检预约</text>
            <text class="feature-desc">一站式体检服务预约，支持多种体检套餐选择，让健康检查更便捷</text>
          </view>
        </view>
        
        <view class="feature-item">
          <image src="/static/images/feature/doctor-consult.svg" mode="aspectFit" class="feature-icon"></image>
          <view class="feature-content">
            <text class="feature-title">医生咨询</text>
            <text class="feature-desc">在线咨询专业医生，足不出户即可获得专业医疗建议</text>
          </view>
        </view>
        
        <view class="feature-item">
          <image src="/static/images/feature/health-consult.svg" mode="aspectFit" class="feature-icon"></image>
          <view class="feature-content">
            <text class="feature-title">健康咨询</text>
            <text class="feature-desc">获取专业的健康指导和建议，帮助您更好地管理健康</text>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
// 页面配置
defineOptions({
  navigationBarTitleText: '功能介绍'
})

// 返回上一页
const handleBack = () => {
  uni.navigateBack()
}
</script>

<style lang="scss">
.feature-intro {
  min-height: 100vh;
  background-color: #f5f5f5;
  position: relative;
  
  .back-button {
    position: fixed;
    top: 80rpx;
    left: 20rpx;
    width: 60rpx;
    height: 60rpx;
    background-color: #fff;
    border-radius: 30rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.1);
    z-index: 100;
  }
  
  .content {
    padding: 180rpx 20rpx 20rpx;
    
    .header {
      padding: 30rpx 0;
      text-align: center;
      
      .title {
        font-size: 36rpx;
        font-weight: bold;
        color: #333;
      }
    }
    
    .feature-list {
      .feature-item {
        background-color: #fff;
        border-radius: 12rpx;
        padding: 30rpx;
        margin-bottom: 20rpx;
        display: flex;
        align-items: center;
        box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
        
        .feature-icon {
          width: 80rpx;
          height: 80rpx;
          margin-right: 20rpx;
        }
        
        .feature-content {
          flex: 1;
          
          .feature-title {
            font-size: 32rpx;
            font-weight: bold;
            color: #333;
            margin-bottom: 10rpx;
            display: block;
          }
          
          .feature-desc {
            font-size: 26rpx;
            color: #666;
            line-height: 1.5;
          }
        }
      }
    }
  }
}
</style> 